<template>
  <v-popup :provideName="provideName" height="50%">
    <div class="info" v-if="song != null">
      <div class="avatar">
        <van-image :src="song.al.picUrl" width="8rem" round />
      </div>
      <ul class="info-list">
        <li class="info-item">
          <div class="title">
            <h3 class="title-text">歌曲名称</h3>
          </div>
          <div class="desc" v-if="show">
            <v-text mode="marquee" style="width: 10rem" :text="song.name" class="desc-text" />
          </div>
        </li>
        <li class="info-item">
          <div class="title">
            <h3 class="title-text">别名</h3>
          </div>
          <div class="desc">
            <p class="desc-text">
               <van-tag v-for="alia in song.alia" :key="alia" type="primary" size="medium">{{ alia }}</van-tag>
            </p>
          </div>
        </li>
        <li class="info-item">
          <div class="title">
            <h3 class="title-text">歌手</h3>
          </div>
          <div class="desc">
            <van-tag v-for="ar in song.ar" :key="ar" type="primary" size="medium">{{ ar.name }}</van-tag>
          </div>
        </li>
        <li class="info-item">
          <div class="title">
            <h3 class="title-text">歌曲时长</h3>
          </div>
          <div class="desc">
            <p>{{maxTime}}</p>
          </div>
        </li>
      </ul>
    </div>
  </v-popup>
</template>

<style lang="scss" scoped>

@keyframes rotateZ {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}

.music {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .music-main {
    display: flex;
    width: auto;
    margin: 0 auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .cover {
      width: 10rem;
      border-radius: 50%;
      padding: .5rem;

      .cover-pic {
        animation: rotateZ 10s infinite;
        animation-timing-function: linear;
      }
    }

    .music-info {
      width: 80vw;
      margin: 2rem 0;

      .music-name {
        width: 80vw;
        font-size: 20px;
        font-weight: bold;
      }

      .music-singer {
        margin-top: .5rem;
        font-size: 14px;
        color: #999;
      }
    }

    .music-progress {
      width: 100%;
      margin: 1rem 0;
      .time{
        font-weight: bold;
        font-size: 14px;
      }
    }
    .music-control{
      .button{
        width: 4rem;
        height: 4rem;
        border: none;
        margin: 0 1rem;
        border-radius: 50%;

        &.play{
          background: #000;
          color: #fff;
          &.touch{
            background: #fff;
            color: #000;
          }
        }
        &.touch{
          background: #07c160c2;
          color: #fff;
        }
        .micon{
          font-size: 1.5rem;
        }
      }
    }
    .details{
      margin-top: 2rem;

      .button{
        padding: .8rem 1rem;
        margin: 0 .5rem;
        border: none;

        &.touch{
          background: linear-gradient(145deg, #cacaca, #f0f0f0);
          box-shadow: 5px 5px 7px #cacaca, -5px -5px 7px #f6f6f6;
        }
      }
    }
  }
}
</style>

<script setup>

import {defineProps, inject, ref, onMounted, watch, toRefs} from "vue";
import {getSongDetail} from "../../api/api";
import {formatDuring} from "../../common/util";
import {Notify} from "vant";
import Loading from "../../common/Loading";

let maxTime = ref('');

let song = ref(null);
let propsDef = defineProps({
  provideName:{
    type:String
  },
  musicId:{
    type:Number
  }
});

let show = inject(propsDef.provideName,ref(false));
let props = toRefs(propsDef);

onMounted(()=>{
  watch([props.musicId,show],(id)=>{
    if(show.value){
      Loading.show();
      console.log(111)
      getSongDetail(propsDef.musicId).then((res)=>{
        if(res.songs?.length ?? 0 >  0){
          song.value = res.songs[0];
          Loading.hide();
          let time =  formatDuring(song.value.dt);
          maxTime.value = time.minutes+"分"+time.seconds+"秒";
        }
      }).catch(()=>{
        Notify({
          type:"danger",
          message:"获取失败"
        });
        Loading.hide();
      })
    }
  })

})

</script>

<style lang="scss" scoped>
.info{
  .avatar{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem;
  }
  .info-list{
    .info-item{
      display: flex;
      margin: .5rem 0;
      .title{
        display: flex;
        justify-content: center;
        width: 30%;
        .title-text{
          font-weight: bold;
        }

      }
    }
  }
}
</style>